﻿@import "../../mixins/vars";
@import "../../mixins/utils";

$sidebar-width: rem(260);
$page-header-height: rem(78);

#page-wrapper {
    height: 100%;
    width: 100%;
    color: #8da0aa;

    &.sidebar-closed {
        #page-sidebar {
            transform: translateX(-100%);
        }

        #page-content {
            margin-left: -$sidebar-width;
        }
    }
}

#page-header {
    height: $page-header-height;
    width: 100%;

    .logo-pane {
        float: left;
        width: $sidebar-width;
        background-color: rgba(255, 255, 255, 0.1);
        color: #fff;
        height: 100%;
    }
}

#page-content-wrapper {
    height: calc(100% - #{$page-header-height});
    display: flex;
    flex-direction: row;
}

#page-sidebar {
    width: $sidebar-width;
    min-height: 100%;
    //background-color: $color-bg;
    transition: transform 0.35s ease;
    flex-shrink: 0;
}

#page-content {
    background-color: $color-bg;
    padding: rem(25);
    width: 100%;
    transition: margin-left 0.35s ease;
}

a {
    color: #8da0aa;
    text-decoration: none;

    &:hover {
        color: #1c82e1;
        text-decoration: none;
    }
}

.sidebar-menu {
    $item-height: rem(35);
    padding: rem(5) rem(20);

    li {
        position: relative;
        margin: rem(2) 0;

        a {
            display: block;
        }
    }

    > li {
        > a {
            padding: 0 rem(10) 0 0;
            border-radius: rem(4);
            font-size: rem(14);
            border: transparent solid 1px;
            @include line-height(35);

            &.active, &:hover {
                border-color: #d1d9dd;
            }
        }
    }

    .iconfont {
        font-size: 18px;
        display: inline-block;
        width: rem(30);
        margin: auto rem(5);
        text-align: center;
    }
}

.placehodler {
    color: #ccc;
}